<template>
    <div class="geo-location">
        <!-- 搜索框容器 -->
        <div class="search-container">
            <!-- 搜索输入框：支持实时搜索（防抖）和回车搜索 -->
            <input 
                type="search" 
                v-model="city" 
                placeholder="请输入城市名称" 
                @input="handleInput"
                @keyup.enter="getData"
            >
            <!-- 搜索图标 -->
            <i class="search-icon">🔍</i>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { API_CITY, KEY } from "@/common/constrant"; // 导入API地址和密钥
import { debounce } from 'lodash'; // 导入防抖函数

export default {
    data() {
        return {
            city: "" // 存储用户输入的城市名
        };
    },
    methods: {
        // 使用防抖处理用户输入，500ms后才发起请求
        handleInput: debounce(function() {
            if (this.city.trim()) {
                this.getData();
            }
        }, 500),

        // 获取城市数据的方法
        getData() {
            // 确保输入不为空
            if (!this.city.trim()) return;
            
            // 发起API请求获取城市信息
            axios.get(API_CITY, {
                params: {
                    key: KEY,
                    location: this.city
                }
            }).then(res => {
                // 检查是否成功获取到城市数据
                if (res.data?.location?.[0]) {
                    // 通过Vuex更新位置信息
                    this.$store.dispatch("updateLocationAction", res.data.location[0]);
                } else {
                    console.error('未找到该城市');
                    // 向父组件发送错误信息
                    this.$emit('search-error', '未找到该城市');
                }
            }).catch(error => {
                console.error('Error fetching data:', error);
                // 向父组件发送错误信息
                this.$emit('search-error', '搜索出错，请稍后重试');
            });
        }
    }
};
</script>

<style scoped>
/* 搜索组件整体样式 */
.geo-location {
    margin-bottom: 1rem;
}

/* 搜索框容器样式 */
.search-container {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

/* 搜索输入框样式 */
input[type="search"] {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 2px solid #ddd;
    border-radius: 20px;
    outline: none;
    transition: border-color 0.3s;
}

/* 搜索框焦点状态样式 */
input[type="search"]:focus {
    border-color: #ffaeb9;
}

/* 搜索图标样式 */
.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none; /* 防止图标影响输入 */
}
</style>